<template>
  <div
  >
    <!-- :on-remove="removeFileOper" -->
    <el-upload
      v-if="!disabled"
      :before-upload="beforeUpload"
      :http-request="handleUploadSuccess"
      :file-list="fileList"
      :show-file-list="false"
      :accept="acceptTypeStr"
      :multiple="multiple"
      :limit="limit"
      :on-exceed="handleExceed"
      action="#"
      class="upload-demo"
    >
      <span style="color:red"><i class="el-icon-plus"/>新增</span>
      <i class="sizeTip">建议尺寸：1125px*900px</i>
      <!-- <div class="el-upload-upload">拖拽文件到这里，或<em>点击选择文件</em></div> -->
    </el-upload>
    <el-table
      :data="fileList"
      tooltip-effect="dark"
      highlight-current-row
      border
    >
      <el-table-column align="center" fixed label="序号" width="50" type="index"/>
      <el-table-column
        v-if="!disabled"
        prop="dtl_seq"
        label="操作"
        width="50">
        <div slot-scope="scope">
          <!-- @click="" fileList.splice((scope.index -1),1) -->
          <el-button class="el-icon-delete" size="mini" type="text" style="font-size: 20px;" @click="fileList.splice(scope.$index,1)" />
        </div>
      </el-table-column>
      <el-table-column align="center" label="图片" width="300" >
        <template slot-scope="scope">
          <img
            v-if="scope.row.file_url"
            :src="scope.row.file_url"
            style=" width: 50px; margin: 0 auto"
            @click="dialogVisible4PreviewImg= true;dialogImageUrl4PreviewImg =scope.row.file_url"
          >
        </template>
      </el-table-column>
      <el-table-column
        prop="dtl_seq"
        label="排序"
        width="100">

        <div slot-scope="scope">

          <el-input :disabled="disabled" v-model="scope.row.dtl_seq" class="input1" placeholder="排序"/>
        </div>
      </el-table-column>
    </el-table>

    <el-dialog
      :visible.sync="dialogVisible4PreviewImg"
      title="预览"
      width="800"
      append-to-body
    >
      <img
        :src="dialogImageUrl4PreviewImg"
        style="display: block; max-width: 100%; margin: 0 auto"
      >
    </el-dialog>
  </div>
</template>

<script>

import { uploadFile } from '@/api/upload.js'

import rSelect from '@/components/Select/Select'
import BaseTable from '@/components/BaseTable'
import formMixins from '@/mixins/formMixins'
import Radio from '@/components/Radio/Radio'
export default {
  components: {
    rSelect,
    BaseTable,
    Radio
  },
  mixins: [formMixins],
  props: {
    disabled: Boolean,
    maxSize: {
      type: Number,
      default: 10 // mb
    },
    acceptTypeStr: {
      type: String,
      default: '.jpg,.png'
    },
    limit: Number,
    multiple: Boolean,
    fileList: Array
  },
  data() {
    return {
      // rowSeqIndex: 1,
      // uidBase64Map: new Map(), // file uid =>base64url
      dialogVisible4PreviewImg: false,
      dialogImageUrl4PreviewImg: ''

    }
  },
  computed: {
    rowSeqIndex: function() {
      let currentMaxSeq = 0

      if (this.fileList) {
        this.fileList.forEach((item, index, arr) => {
          if (item.dtl_seq && Number(item.dtl_seq) > currentMaxSeq) {
            currentMaxSeq = Number(item.dtl_seq)
          }
        })
      }
      return currentMaxSeq + 1
    // this.rowSeqIndex = currentMaxSeq + 1
    }
  },
  // 初始化
  mounted() {
    // let currentMaxSeq = 0
    // debugger
    // if (this.fileList) {
    //   this.fileList.forEach((item, index, arr) => {
    //     if (item.dtl_seq && item.dtl_seq > currentMaxSeq) {
    //       currentMaxSeq = item.dtl_seq
    //     }
    //   })
    // }
    // this.rowSeqIndex = currentMaxSeq + 1
  },
  methods: {
    beforeUpload(file) {
      if (this.acceptTypeStr != null && this.acceptTypeStr !== '' && this.acceptTypeStr !== undefined && this.acceptTypeStr.indexOf(file.name.substring(file.name.lastIndexOf('.'), file.name.length)) < 0) {
        this.$message({
          type: 'error',
          message: `文件后缀需要为：${this.acceptTypeStr}`
        })
        return false
      }
      if (this.maxSize != null && this.maxSize !== '' && this.maxSize !== undefined && file.size / 1024 / 1024 > parseInt(this.maxSize)) {
        this.$message({
          type: 'error',
          message: '上传文件大小需小于' + this.maxSize + 'MB!'
        })
        return false
      }
    },
    handleUploadSuccess(param) {
      // this.imgFile = []
      const that = this
      // console.log('param is ', param)
      const formData = new FormData()
      formData.append('file', param.file)

      uploadFile(formData).then((res) => {
        const tempObj = {}
        // tempObj.dtl_seq = (that.rowSeqIndex++)
        tempObj.dtl_seq = that.rowSeqIndex
        tempObj.file_url = res.file_id
        tempObj.file_upload_info_id = res.file_upload_info_id
        tempObj.name = res.name
        that.fileList.push(tempObj)

        // param.dtl_seq = (that.rowSeqIndex++)
        // param.file_url = res.file_id
        // param.file_upload_info_id = res.file_upload_info_id
        // param.name = res.name
        // param.file = null // 移除文件
        // that.fileList.push(param)
      })

      // const reader = new FileReader()
      // reader.readAsDataURL(param.file)
      // const that = this
      // 读取完成后触发
      // reader.onload = function() {
      //   that.uidBase64Map.set(param.file.uid, this.result)
      //   that.$set(param, 'fileReadReady', true)
      //   // console.log(this.result)
      //   // console.log(that.uidBase64Map)
      //   // console.log(that.uidBase64Map.get(param.file.uid))
      // }
      // // this.fileList.push(param)
      // this.fileList.push(param)
      console.log(this.fileList)
    },
    handleExceed(arg1, arg2) {
      this.$message({
        type: 'warning',
        message: `超出限制条数${this.limit}!`
      })
    },
    removeFileOper(file, fileList) {
      console.log('fileList is ', fileList)
      console.log('file is ', file)
      // this.imgFile = []
    },
    // 返回清空列表
    clear() {
      this.type = ''
      this.$parent.searchHandle()
      this.$emit('update:showAdd', false)
    }
  }
}
</script>

<style scoped>
.input1 {
    min-height: 30px;
    margin: 0px;
    width: 50px;
}
.sizeTip{
  font-style: normal;
    margin-bottom: 8px;
    font-size: 13px;
    color: rgb(255, 0, 13);
    height: 12px;

  }
</style>
